<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="../css/page2.css">
		<title></title>
	</head>

	<body>
		<audio id="music" autoplay="autoplay" loop="loop">       
    		<source src="../media/bgm.mp3" type="audio/mpeg" />
        </audio>
		<div class='page2'>
			<img src="../images/p2-1.jpg" class='img7'/>
			<img src="../images/p2-2.jpg" class='img8'/>
			<img src="../images/p2-3.jpg" class='img3' />
			<img src="../images/p2-5.jpg" class='img4' />
			<img src="../images/p2_03.gif" class='img5' />
			<img src="../images/p2_06.gif" class='img6' />			
			<div class='text'>
				<ul>
					<li>随着农业技术的发展</li>
					<li>本应成为主食的五谷杂粮</li>
					<li>却渐渐被快餐零食所替代</li>
					<li class="li-1">人们的健康水平</li>
					<li class="li-2">也在餐饮条件的变化下</li>
					<li class="li-3">变得参差不齐</li>
				</ul>
				<!--<p>随着农业技术的发展<br>本应成为主食的五谷杂粮<br>却渐渐被快餐零食所替代<br>
				人们的健康水平<br>也在餐饮条件的变化下<br>变得参差不齐</p>-->
			</div>

		</div>
        
		<script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery.rotate.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var li = document.querySelectorAll('.text li')
			//			console.log(li)
			var img1 = document.querySelector('.img1')
			var img2 = document.querySelector('.img2')			
			for(var i = 0; i < li.length; i++) {

			}
			var a = -1;
			var timerid = setInterval(function() {
				a++;
				if(a == 5) {
					clearInterval(timerid)
					setInterval(function(){	
						$('.img3').css({display:'block'});
						$('.img3').animate({
							bottom:'0.15rem'						
						},500).animate({
							bottom:'0rem'
						},500)
					},50)
				}
				li[a].style.display = 'block'				
			}, 1000);

			var angle = 0;
			setInterval(function() {
				angle += 3;
				$('.img5').rotate(angle);
				$('.img6').rotate(angle);
				$('.img4').rotate(angle);
			}, 50);

		</script>
	</body>

</html>